<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <flightsFilters
            v-if="flightsData.options"
            :options="flightsData.options"
            :info="flightsData.info"
            :flights="cacheFlightsList"
            @setDataList="setDataList"
          />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <flightsListHead />
        </div>

        <!-- 航班信息 -->
        <flightsItem
          :FlightsData="item"
          v-for="item in FlightsList"
          :key="item.id"
        />
        <div
          v-if="flightsData.flights && flightsData.flights.length == 0"
          class="noInfo"
        >
          没有航班信息
        </div>
        <!-- 分页 -->
        <el-row type="flex" class="row-bg" justify="center">
          <el-pagination
            @size-change="changeSize"
            @current-change="changeIndex"
            :page-size="pageSize"
            :page-sizes="[2, 5, 10, 20, 50]"
            layout="total,prev, pager, next,sizes,jumper"
            :total="flightsData.total"
          ></el-pagination>
        </el-row>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <flightsAside />
      </div>
    </el-row>
  </section>
</template>

<script>
import flightsListHead from "@/components/air/flightsListHead.vue";
import flightsItem from "@/components/air/flightsItem.vue";
import flightsFilters from "@/components/air/flightsFilters.vue";
import flightsAside from "@/components/air/flightsAside.vue";

export default {
  components: {
    flightsListHead,
    flightsItem,
    flightsFilters,
    flightsAside
  },
  data() {
    return {
      cacheFlightsList: [],
      flightsData: {},
      pageSize: 10,
      pageIndex: 1
    };
  },
  watch: {
    $route() {
      // console.log("route变了,重新加载页面");
      this.loadPage();
    }
  },
  computed: {
    // 使用计算属性监听，当页码等值发生改变会自动改变数据
    FlightsList() {
      if (!this.flightsData.flights) {
        return [];
      }
      // 起始条数
      const start = (this.pageIndex - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.flightsData.flights.slice(start, end);
    }
  },
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        this.flightsData = res.data;
        console.log(this.flightsData);
        // 缓存原始100条数据
        this.cacheFlightsList = this.flightsData.flights;
      });
    },
    changeSize(pagesize) {
      this.pageSize = pagesize;
    },
    changeIndex(pageindex) {
      this.pageIndex = pageindex;
    },
    setDataList(newList) {
      // console.log("接收到新的列表");
      this.flightsData.flights = newList;
    }
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
.row-bg {
  margin-top: 20px;
}
.noInfo {
  text-align: center;
  font-size: 18px;
  background-color: #e0ebeb;
  padding: 10px;
  color: #333;
}
</style>
